import Vue from 'vue'
import Router from 'vue-router'
// 导入login组件
import Login from '@/components/login/Login'
// 导入首页组件
import Home from '@/components/home/Home'
// 导入用户列表组件
import Users from '@/components/users/Users'
// 安装路由插件，在webpack这样的模块化系统中，必须执行这一步
Vue.use(Router)

const router = new Router({
  // 配置组件展示到路由出口，将来匹配的组件会展示在Home组件的router-view中
  routes: [
    // children用来配置子路由
    {
      path: '/home',
      component: Home,
      children: [{path: 'users', component: Users}]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})
// 全局导航守卫
// 所有的路由都会先走守卫，添加导航守卫之后，不管是访问哪个路由，都会执行这个回调函数中的代码,,因为所有的路由都会经过该导航守卫，所以，就可以在这个导航守卫的回调函数中判断有没有登录了
router.beforeEach((to, from, next) => {
  // console.log('导航守卫', to)
  if (to.path === '/login') {
    // 如果访问的是login页面，直接放行，也就是任何人不管有没有登录
    // 都可以访问登录页面
    // 直接调用 next() 方法，表示：访问的是哪个页面，就展示这个页面的内容
    next()
  } else {
    // 访问的不是登录页面

    // 判断用户是否登录成功，
    // 1 当用户登录成功，直接调用 next() 方法放行
    // 2 当用户没有登录，应该调用 next('/login') 跳转到登录页面，让用户登录

    // 通过登录成功时候保存的token，来作为有没有登录成功的条件
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  }
})
export default router
